﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Note.aspx.cs" Inherits="Note.Note" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
    #divContent
    {
        background-color:White;
        height:300px; 
        width:100% - 15px;
        height:700px;
        overflow:auto;
        padding:5px; 
        border: 3px coral solid;       
    }
    
    body
    {
        background-color:transparent;    
    }
    
    input.fontButton
    {
        padding:10px;   
        background-color:transparent; 
        font-weight:bold;
        color:Black;
        outline:none;
        border:none;
        font-size:medium;
        font-family:arial, sans-serif;
        vertical-align:middle;
    }
    
    input.fontButtonPressed
    {
        padding:10px;   
        background-color:Red; 
        font-weight:bold;
        color:Black;
        outline:none;
        border:none;
        font-size:medium;
        font-family:arial, sans-serif;
        vertical-align:middle;
        outline:black solid 1px;       
    }
        
    input.italic
    {        
        font-style:italic;
        padding:11px;
    }
    
    input.underline
    {
        text-decoration:underline;
    }
    
    input.strikethrough
    {
        text-decoration:line-through;
    }
    
    input.fontButton:hover
    {
        outline:black solid 1px;        
    }
    
    a.newNote
    {
        padding:10px;   
        font-size:medium;
        font-family:arial, sans-serif;
        text-decoration:none;
        vertical-align:middle;
    }
    
    a.newNote:hover
    {
        outline:black dotted 1px;
    }
  
    
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="hidden" runat="server" id="hdnUserHash" />
        <div id="divTabListing"></div>
        <br />
        <div id="divFormatting" style="display:inline;">
            <input id="btnBold" title="bold" type="button" class="fontButton" value = "B" onclick="document.execCommand('bold', false, null);autoSave();" />
            <input id="btnItalic" title="italic" type="button" class="fontButton italic"  value = "I" onclick="document.execCommand('italic', false, null);autoSave();" />
            <input id="btnUnderline" title="underline" type="button" class="fontButton underline"  value = "U" onclick="document.execCommand('underline', false, null);autoSave();" />
            <input id="btnStrikeThrough" title="strikethrough" type="button" class="fontButton strikethrough" value = "S" onclick="document.execCommand('strikethrough', false, null);autoSave();" />
        </div>
        <div style="float:right">
            <a href="?New=1" class="newNote" title="Click to open a new note. The old note can still be accessed by the url">New Note</a>
        </div> 
        <br />
        <div id="divContent" CONTENTEDITABLE runat="server" onkeyup="autoSave(event);" onblur="autoSave();" ></div>    
        <br />
    </div>

   <%-- <input type="button" onclick="autoSave();" value="Save" />--%>
    </form>

    <script type="text/javascript" src="/Note/Scripts/jquery-1.7.2.min.js" ></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#divContent')[0].focus();
            prevData = '#####################';
        });

        function autoSave(event) {

//            //handle the font buttons
//            if (event != null) {
//                if (event.ctrlKey && event.keyCode == 66) { //Bold
//                    toggleBold();
//                }

//                if (event.ctrlKey && event.keyCode == 73) { //Italic
//                    toggleItalic();
//                }

//                if (event.ctrlKey && event.keyCode == 85) { //Underline
//                    toggleUnderline();
//                }
            //            }

            if (prevData == noteData) {
                return;
            }

            var noteData = $('#divContent')[0].innerHTML;
            noteData = noteData.replace(/\\/g, "\\\\");
            noteData = noteData.replace(/'/g, "\\'");
          
            $.ajax({
                type: "POST",
                url: "/Note/Note.aspx/AutoSaveContent",
                data: "{data: '" + noteData + "', userHash: '" + $('#hdnUserHash')[0].value + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //alert('success');
                    //doNothing
                },
                failure: function (a, b, c) {
                    alert('failure');
                    alert(a);
                    alert(b);
                    alert(c);
                },
                error: function (a, b, c) {
                    alert('error');
                    alert(c);
                }
            });

            prevData = noteData;
        }


//        function toggleBold() {
//            var btnBold = $('#btnBold')[0];

//            if (btnBold.isPressed) {
//                btnBold.isPressed = false;
//                $(btnBold).addClass('fontButton');
//                $(btnBold).removeClass('fontButtonPressed');
//            }
//            else {
//                btnBold.isPressed = true;
//                $(btnBold).addClass('fontButtonPressed');
//                $(btnBold).removeClass('fontButton');
//            }
//        }


//        function toggleItalic() {
//            var btnItalic = $('#btnItalic')[0];

//            if (btnItalic.isPressed) {
//                btnItalic.isPressed = false;
//                $(btnItalic).addClass('fontButton');
//                $(btnItalic).removeClass('fontButtonPressed');
//            }
//            else {
//                btnItalic.isPressed = true;
//                $(btnItalic).addClass('fontButtonPressed');
//                $(btnItalic).removeClass('fontButton');
//            }
//        }


//        function toggleUnderline() {
//            var btnUnderline = $('#btnUnderline')[0];

//            if (btnUnderline.isPressed) {
//                btnUnderline.isPressed = false;
//                $(btnUnderline).addClass('fontButton');
//                $(btnUnderline).removeClass('fontButtonPressed');
//            }
//            else {
//                btnUnderline.isPressed = true;
//                $(btnUnderline).addClass('fontButtonPressed');
//                $(btnUnderline).removeClass('fontButton');
//            }
//        }


//        function toggleStrikeThrough() {
//            var btnStrikeThrough = $('#btnStrikeThrough')[0];

//            if (btnStrikeThrough.isPressed) {
//                btnStrikeThrough.isPressed = false;
//                $(btnStrikeThrough).addClass('fontButton');
//                $(btnStrikeThrough).removeClass('fontButtonPressed');
//            }
//            else {
//                btnStrikeThrough.isPressed = true;
//                $(btnStrikeThrough).addClass('fontButtonPressed');
//                $(btnStrikeThrough).removeClass('fontButton');                
//            }
//        }
        
    </script>
</body>
</html>
